<template>
    <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
    >
    </quill-editor>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import { get } from "lodash";
import { set } from "lodash";
export default {
    name: "com-editor",
    components: {
        quillEditor,
    },
    props: {
        value: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            // content: '',
            editorOption: {
            // some quill options
            },
        };
    },
    computed: {

        content: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            }
        },
        editor() {
            return this.$refs.myQuillEditor.quill
        }
    },
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur(quill) {
        this.$emit('blur', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
        this.$emit('focus', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
        this.$emit('ready', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html;
        set(this.$data, 'content', html)
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
};
</script>
